<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="fiexd-top">
			<view class="header">
				<view class="arrow" @tap="$back()"><image src="../../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="text f36 cfff">本店员工</view>
				<view class="btn" @tap="$open('./add')"><image src="../../../static/images/tb_more.png" mode="aspectFit"></image></view>
			</view>
		</view>
		<view style="height: 140upx;"></view>

		<!-- 	<view class="bossBox mt20">
			<view class="pic"><image src="../../../static/images/201916541220.jpg" mode="aspectFit"></image></view>
			<view class="text">
				<view class="name f32 c333">某某（老板）</view>
				<view class="dianhua f32 c666">13851223378</view>
			</view>
		</view> -->

		<view class="staffList mt20">
			<view class="staff-item" v-for="(item, index) in StaffList" :key="index" @tap="goEditInfo(item, item.is_boss, item.user_id)">
				<view class="left">
					<view class="pic"><dimg :src="item.avatar"></dimg></view>
					<view class="text">
						<view class="name f32 c333">{{ item.name }}({{ item.is_boss == 1 ? '老板' : fn(item.auth_group_ids) }})</view>
						<view class="dianhua f32 c666">{{ item.telephone }}</view>
					</view>
				</view>

				<view class="arrow" v-if="item.is_boss != 1"><image src="../../../static/images/arrow_right.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StaffList: [],
			roles: []
		};
	},

	onShow() {
		uni.removeStorage({
			key: 'list',
			success: function(res) {
				console.log('success');
			}
		});
		this.getStaffList();
	},
	methods: {
		//获取员工列表
		getStaffList() {
			let that = this;
			that.$ajax(
				'api/v1.user/index',
				{
					token: uni.getStorageSync('userinfo').token
				},
				'GET'
			)
				.then(res => {
					if (res.code == 1) {
						console.log(res.result);
						that.StaffList = res.result;
					}
				})
				.catch(res => {});
		},
		goEditInfo(item, isBoss, id) {
			if (isBoss != 1) {
				uni.navigateTo({
					url: './employeeInfo?userId=' + id + '&item=' + JSON.stringify(item)
				});
			}
		},
		fn(item) {
			let c = [];
			item.forEach(child => {
				console.log(child);

				if (child == 1) {
					c.push('店铺管理员');
				}
				if (child == 2) {
					c.push('销售员');
				}
				if (child == 3) {
					c.push('创库管理员');
				}
			});
			return c.join('/');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #ffffff;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.fiexd-top {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #249af6;
	padding: 45upx 30upx 0 30upx;

	.arrow {
		image {
			width: 22upx;
			height: 40upx;
		}
	}
	.btn {
		image {
			width: 44upx;
			height: 44px;
		}
	}
}

.bossBox {
	background-color: $white-background;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 40upx 30upx;
	.pic {
		image {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-right: 30upx;
			vertical-align: middle;
		}
	}
	.text {
		.name {
			margin-bottom: 15upx;
		}
	}
}
.staffList {
	background-color: $white-background;
	.staff-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #eee solid;
		padding: 35upx;
		&:last-child {
			border-bottom: none;
		}
		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			.pic {
				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					margin-right: 30upx;
					vertical-align: middle;
				}
			}
			.text {
				.name {
					margin-bottom: 15upx;
				}
			}
		}
		.arrow {
			image {
				width: 20upx;
				height: 35upx;
			}
		}
	}
}
</style>
